import React, { Component } from 'react'
import { withRouter } from "react-router-dom";
import {connect} from 'react-redux'
import request from '../../api/api'
import './Search.scss'
import recordAction from '../../redux/action/recordAction'
class Search extends Component {
  searchRef = React.createRef()

  state = {
    searchList: []
  }
  
  back = ()=>{
    this.props.history.goBack()
  }

  getSearch = () => {
    if(this.searchRef.current.value===''){
      this.setState({
        searchList: []
      })
      return
    }
    clearTimeout(this.t)
    this.t = setTimeout(() => {
      request({
        url:`/api/maoyan/search/movies?keyword=${this.searchRef.current.value}&ci=1`,
        method:'get'
      }).then(res => {
        this.setState({
          searchList: res
        })
      })
    }, 100);
  }
  goDes=(item)=>{
    this.props.recordAction('record',item)
    this.props.history.push(`/moviedes/${item.id}/${item.like}`)
  }
  render() {
    return (
      <div className='search'>
        <div className='sosuo'>
          <div className="suoSuo">
            <input type="text" placeholder="搜电影..." ref={this.searchRef} onInput={this.getSearch}/>
            <button onClick={this.back}>取消</button>
          </div>
          <div className="nr">
            <ul>
              {
                this.state.searchList.length>0 && this.state.searchList.map(item => {
                  return (
                    <li key={item.id} onClick={()=>this.goDes(item)}>
                      <div className="leftss">
                        <div className="tu">
                          <img src={item.poster} alt="" />
                        </div>
                        <div className="jies">
                          <h3>{item.name}</h3>
                          <p>{item.ename}</p>
                          <p>{item.catogary}</p>
                          <p>{item.release}</p>
                        </div>
                      </div>
                      <div className="xiangKan">
                        <p>{item.wish}人想看</p>
                        <button>想看</button>
                      </div>
                    </li>
                  )
                })
              }
            </ul>
          </div>
        </div>
      </div>
    )
  }
}
export default connect(
  state=>({}),
  {
    recordAction
  }
)(withRouter(Search))